<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="12">
            <a-form-item label="用户姓名">
              <a-input placeholder="输入用用户姓名" v-model="queryParam.realname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="手机号码">
              <a-input placeholder="输入手机号码" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="UID">
              <a-input placeholder="输入UID" v-model="queryParam.uid"></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="部门">
              <j-select-depart placeholder="请选择部门" customReturnField="orgCode" org-code="" v-model="queryParam.realDepart"/>
            </a-form-item>
          </a-col> -->
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="12">
              <a-form-item label="角色">
                <j-multi-select-tag v-model="queryParam.roleIds" :options="rolesOptions" placeholder="请选择角色"></j-multi-select-tag>
              </a-form-item>
            </a-col>
<!--            <a-col :md="6" :sm="12">-->
<!--              <a-form-item label="所属组织">-->
<!--                <j-search-select-tag ref="jSingleSelectTagRef" v-model="queryParam.tenantId" placeholder="请选择所属组织"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
            <!-- <a-col :md="6" :sm="12">
              <a-form-item label="工号">
                <j-input placeholder="请输入工号" v-model="queryParam.workNo"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="性别">
                <a-select v-model="queryParam.sex" placeholder="请选择性别">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="1">男</a-select-option>
                  <a-select-option value="2">女</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="真实名字">
                <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
              </a-form-item>
            </a-col> -->

            <a-col :md="6" :sm="12">
              <a-form-item label="账户状态">
                <j-dict-select-tag placeholder="请选择账户状态" v-model="queryParam.status" dictCode="user_status"/>
              </a-form-item>
            </a-col>

          </template>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px">
       <a-button @click="handleAdd" type="primary" icon="plus"  v-has="'user:add'" >创建用户</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button> -->
      <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
        @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
      <!-- <j-third-app-button biz-type="user" :selected-row-keys="selectedRowKeys" syncToLocal
        @sync-finally="onSyncFinally" /> -->
      <!-- <a-button type="primary" icon="hdd" @click="recycleBinVisible=true">回收站</a-button> -->
      <!-- <a-button type="primary" icon="sync" @click="asyncWorkNo">同步用户工号</a-button> -->
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick"> -->
          <!--          <a-menu-item key="1">-->
          <!--            <a-icon type="delete" @click="batchDel"/>-->
          <!--            删除-->
          <!--          </a-menu-item>-->
          <!--          <a-menu-item key="2">-->
          <!--            <a-icon type="lock" @click="batchFrozen('2')"/>-->
          <!--            冻结-->
          <!--          </a-menu-item>-->
          <!-- <a-menu-item key="3">
            <a-icon type="unlock" @click="batchFrozen('1')" />
            解冻
          </a-menu-item> -->
<!--          <a-menu-item key="4">-->
<!--            <a-icon type="idcard" @click="batchResign()" />-->
<!--            离职-->
<!--          </a-menu-item>-->
        <!-- </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown> -->
      <!-- <j-super-query :fieldList="superQueryFieldList" @handleSuperQuery="handleSuperQuery" /> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
          selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table ref="table" bordered size="middle" rowKey="id" :scroll="{ x: true }" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">

        <!-- <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
          </div>
        </template> -->
        <!-- 用户名 -->
        <template slot="usernameSlot" slot-scope="text, record, index">
          <j-ellipsis :value="text" :length="20"></j-ellipsis>
        </template>
        <!-- <span slot="thirdOrgCodeSlot" slot-scope="text, record">
          <j-ellipsis :value="text" :length="15"/>
        </span>   -->
        <!-- 账户状态 -->
        <!-- 公司管理员禁止操作 -->
        <template slot="statusSlot" slot-scope="text, record"  v-has="'user:frozen'">
          <a-switch :checked="text === 1 ? true :false" @change="onStatusChange(record)" :disabled="record.isAdmin === 'Y'" />
        </template>
        <template slot="roleSlot" slot-scope="text, record">
          <span v-if="record.roleName">{{record.roleName}}</span>
          <span v-else-if="record.isAdmin == 'Y'">管理员</span>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleChangePassword(record.username)" v-has="'user:changePd'">修改密码</a>
          <a-divider v-has="'user:changePd'" type="vertical" />
          <a @click="handleEdit(record)" v-has="'user:edit'">编辑</a>
          <a-divider v-has="'user:edit'" type="vertical" />
<!--          <a v-if="record.status == 1" @click="handleResign(record.id, record.username)">离职</a>-->
<!--          <a-divider v-if="record.status == 1" type="vertical" />-->

          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <!-- 账号为顶级管理员角色不支持删除 -->
              <a-menu-item v-has="'user:del'" v-if="record.isAdmin === 'N'">
                <!-- 账号为顶级管理员角色不支持删除，其他角色账号支持删除 -->
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a >删除</a>
                </a-popconfirm>
              </a-menu-item>
              <!-- 操作日志 -->
              <a-menu-item>
                <j-operate-log :id="record.id"></j-operate-log>
              </a-menu-item>
              <!-- <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item> -->

              <!-- <a-menu-item>
                <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
              </a-menu-item> -->

              <!--              <a-menu-item>-->
              <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
              <!--                  <a>删除</a>-->
              <!--                </a-popconfirm>-->
              <!--              </a-menu-item>-->

              <!-- <a-menu-item v-if="record.status==1">
                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">
                  <a>冻结</a>
                </a-popconfirm>
              </a-menu-item> -->

              <!-- <a-menu-item v-if="record.status == 2">
                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id, 1, record.username)">
                  <a>解冻</a>
                </a-popconfirm>
              </a-menu-item> -->

              <!--              <a-menu-item>-->
              <!--                <a href="javascript:;" @click="handleAgentSettings(record.username)">代理人</a>-->
              <!--              </a-menu-item>-->

            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <user-modal ref="modalForm" @ok="modalFormOk" :rolesOptions="rolesOptions"></user-modal>

    <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>

    <!-- <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal> -->

    <!-- 用户回收站 -->
    <!-- <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk" /> -->

<!--    <a-modal title="请选择离职时间" :visible="visible" :confirm-loading="confirmLoading" @ok="handleResignTimeOk"-->
<!--      @cancel="handleHideResignTime">-->
<!--      <j-form-container>-->
<!--        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">-->
<!--          <a-row>-->
<!--            <a-col :span="24">-->
<!--              <a-form-model-item label="离职时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="resignTime">-->
<!--                <j-date placeholder="请选择离职时间" style="width: 100%" v-model="model.resignTime" />-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
<!--        </a-form-model>-->
<!--      </j-form-container>-->
<!--    </a-modal>-->

  </a-card>

</template>

<script>
import UserModal from './modules/UserModal'
import PasswordModal from './modules/PasswordModal'
// import { putAction, getFileAccessHttpUrl, postAction, getAction } from '@/api/manage';
import { frozenBatch, resignBatch, queryall } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import SysUserAgentModal from "./modules/SysUserAgentModal";
// import JInput from '@/components/jeecg/JInput'
// import UserRecycleBinModal from './modules/UserRecycleBinModal'
// import JSuperQuery from '@/components/jeecg/JSuperQuery'
// import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'

export default {
  name: "UserList",
  mixins: [JeecgListMixin],
  components: {
    // JThirdAppButton,
    // SysUserAgentModal,
    UserModal,
    PasswordModal,
    // JInput,
    // UserRecycleBinModal,
    // JSuperQuery
  },
  data() {
    return {
      description: '这是用户管理页面',
      // recycleBinVisible: false,
      model: {
      },
      visible: false,
      confirmLoading: false,
      // validatorRules: {
      //   resignTime: [
      //     { required: true, message: '请选择离职时间!' },
      //   ],
      // },
      // labelCol: {
      //   xs: { span: 24 },
      //   sm: { span: 5 },
      // },
      // wrapperCol: {
      //   xs: { span: 24 },
      //   sm: { span: 16 },
      // },
      columns: [
        /*{
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },*/
        {
          title: '手机号码',
          align: "center",
          dataIndex: 'phone'
        },
        {
          title: 'UID',
          align: "center",
          dataIndex: 'uid'
        },
        // {
        //   title: '工号',
        //   align: "center",
        //   width: 100,
        //   dataIndex: 'workNo',
        // },
        {
          title: '用户姓名',
          align: "center",
          dataIndex: 'realname',
          scopedSlots: { customRender: 'usernameSlot' },
        },
        // {
        //   title: '用户姓名',
        //   align: "center",
        //   width: 100,
        //   dataIndex: 'realname',
        // },
        // {
        //   title: '头像',
        //   align: "center",
        //   dataIndex: 'avatar',
        //   scopedSlots: { customRender: "avatarslot" }
        // },

        // {
        //   title: '性别',
        //   align: "center",
        //   dataIndex: 'sex_dictText',
        // },
        // {
        //   title: '生日',
        //   align: "center",
        //   width: 100,
        //   dataIndex: 'birthday'
        // },
        // {
        //   title: '权限部门',
        //   align: "center",
        //   dataIndex: 'orgCodeTxt',
        // },
        // {
        //   title: '负责部门',
        //   align: "center",
        //   dataIndex: 'departIds_dictText',
        // },
        // {
        //   title: '部门',
        //   align: "center",
        //   dataIndex: 'realDepart_dictText',
        // },
        // {
        //   title: '结算组织',
        //   align: "center",
        //   dataIndex: 'realAccountId_dictText',
        // },
        // {
        //   title: '职务',
        //   align: "center",
        //   width: 180,
        //   dataIndex: 'post',
        // },
        // {
        //   title: '离职时间',
        //   align: "center",
        //   width: 110,
        //   dataIndex: 'resignTime',
        //   customRender: function (text) {
        //     return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
        //   },
        //   sorter: true
        // },
        {
          title: '角色',
          align: "center",
          scopedSlots: {customRender: 'roleSlot'},
          dataIndex: 'roleName',
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'createTime',
        },
        {
          title: '所属组织',
          align: "center",
          dataIndex: 'departFullName',
        },
        {
          title: '账号状态',
          align: "center",
          dataIndex: 'status',
          scopedSlots: { customRender: 'statusSlot' },
          // customCell:(record, rowIndex)=>{		//在此处定义
          //   if(record.status_dictText == '冻结'){
          //     return {style:{'color': '#fa8c16'}}    //return 想要设置的样式ffd700
          //   }else if(record.status_dictText == '正常'){
          //     return {style:{'color': '#088f01'}}    //return 想要设置的样式
          //   }
          // }
        },
        // {
        //   title: '是否考核业绩',
        //   align: "center",
        //   width: 80,
        //   sorter: true,
        //   dataIndex: 'isAppraisal_dictText'
        // },
        // {
        //   title: '是否考勤',
        //   align: "center",
        //   width: 80,
        //   sorter: true,
        //   dataIndex: 'isAttendance_dictText'
        // },
        // {
        //   title: '所属公司',
        //   align: "center",
        //   dataIndex: 'thirdOrgCode_dictText',
        //   scopedSlots: { customRender: 'thirdOrgCodeSlot' },
        // },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: "center",
          width: 170,
          fixed: 'right',
        }

      ],
      // superQueryFieldList: [
      //   { type: 'input', value: 'phone', text: '手机号', },
      //   { type: 'input', value: 'realname', text: '用户姓名', },
      //   { type: 'select', value: 'sex', dbType: 'int', text: '性别', dictCode: 'sex' },
      // ],
      url: {
        syncUser: "/act/process/extActProcess/doSyncUser",
        list: "/sys/user/list",
        delete: "/sys/user/delete",
        deleteBatch: "/sys/user/deleteBatch",
        exportXlsUrl: "/sys/user/exportXls",
        importExcelUrl: "sys/user/importExcel",
        syncWorkNo:'/sys/user/syncWorkNo',
        merchantOrgList: "/sys/tenant/list"
      },
      rolesOptions: []
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  // watch: {
  //   toggleSearchStatus: {
  //     handler(val){
  //       if(val){
  //         this.initSysMerchantOrgList();
  //       }
  //     }
  //   }
  // },
  created(){
    this.initRoleList();
  },
  methods: {
    // getAvatarView: function (avatar) {
    //   return getFileAccessHttpUrl(avatar)
    // },
    // handleHideResignTime() {
    //   this.visible = false;
    // },
    // handleResignTimeOk() {
    //   this.$refs.form.validate(valid => {
    //     if (valid) {
    //       this.confirmLoading = true;
    //       resignBatch({ ids: this.model.ids, resignTime: this.model.resignTime }).then((res) => {
    //         if (res.success) {
    //           this.$message.success(res.message);
    //           this.loadData();
    //           this.onClearSelected();
    //         } else {
    //           this.$message.warning(res.message);
    //         }
    //       }).finally(() => {
    //         this.loading = false
    //         this.confirmLoading = false;
    //         this.visible = false;
    //       });
    //     }
    //   });
    // },
    // batchResign() {
    //   if (this.selectedRowKeys.length <= 0) {
    //     this.$message.warning('请选择一条记录！');
    //     return false;
    //   } else {
    //     let ids = "";
    //     let that = this;
    //     let isAdmin = false;
    //     that.selectionRows.forEach(function (row) {
    //       if (row.username == 'admin') {
    //         isAdmin = true;
    //       }
    //     });
    //     if (isAdmin) {
    //       that.$message.warning('管理员账号不允许此操作,请重新选择！');
    //       return;
    //     }
    //     that.selectedRowKeys.forEach(function (val) {
    //       ids += val + ",";
    //     });
    //     // 最终才可以调用弹窗
    //     this.visible = true;
    //   }
    // },
    // batchFrozen: function (status) {
    //   if (this.selectedRowKeys.length <= 0) {
    //     this.$message.warning('请选择一条记录！');
    //     return false;
    //   } else {
    //     let ids = "";
    //     let that = this;
    //     let isAdmin = false;
    //     that.selectionRows.forEach(function (row) {
    //       if (row.username == 'admin') {
    //         isAdmin = true;
    //       }
    //     });
    //     if (isAdmin) {
    //       that.$message.warning('管理员账号不允许此操作,请重新选择！');
    //       return;
    //     }
    //     that.selectedRowKeys.forEach(function (val) {
    //       ids += val + ",";
    //     });
    //     that.$confirm({
    //       title: "确认操作",
    //       content: "是否" + (status == 1 ? "解冻" : "冻结") + "选中账号?",
    //       onOk: function () {
    //         frozenBatch({ ids: ids, status: status }).then((res) => {
    //           if (res.success) {
    //             that.$message.success(res.message);
    //             that.loadData();
    //             that.onClearSelected();
    //           } else {
    //             that.$message.warning(res.message);
    //           }
    //         });
    //       }
    //     });
    //   }
    // },
    //同步工号
    // asyncWorkNo(){
    //   const that = this
    //   let ids=''
    //   let contentStr =''
    //   if(that.selectedRowKeys.length > 0){
    //     contentStr = "确认要同步"+ that.selectedRowKeys.length + "个用户工号吗？"
    //     ids = that.selectedRowKeys.join(',')
    //   }else{
    //     contentStr = "确认要同步工号吗？"
    //     ids = ''
    //   }
    //   that.$confirm({
    //     title: "确认操作",
    //     content:contentStr,
    //     onOk: function () {
    //       putAction(that.url.syncWorkNo,{ids: ids })
    //         .then((res)=>{
    //           if(res.success){
    //             that.$message.success(res.message)
    //             that.selectedRowKeys = []
    //             setTimeout(()=>{
    //              that.loadData()
    //             }, 1000)
    //           }else{
    //             that.$message.warning(res.message);
    //           }
    //         })

    //     }
    //   })


    // },
    // handleMenuClick(e) {
    //   if (e.key == 1) {
    //     this.batchDel();
    //   } else if (e.key == 2) {
    //     this.batchFrozen(2);
    //   } else if (e.key == 3) {
    //     this.batchFrozen(1);
    //   } else if (e.key == 4) {
    //     this.batchResign();
    //   }
    // },
    // handleResign: function (id, username) {
    //   let that = this;
    //   //TODO 后台校验管理员角色
    //   if ('admin' == username) {
    //     that.$message.warning('管理员账号不允许此操作！');
    //     return;
    //   }
    //   this.model.ids = id;
    //   this.visible = true;
    // },
    // handleFrozen: function (id, status, username) {
    //   let that = this;
    //   //TODO 后台校验管理员角色
    //   if ('admin' == username) {
    //     that.$message.warning('管理员账号不允许此操作！');
    //     return;
    //   }
    //   frozenBatch({ ids: id, status: status }).then((res) => {
    //     if (res.success) {
    //       that.$message.success(res.message);
    //       that.loadData();
    //     } else {
    //       that.$message.warning(res.message);
    //     }
    //   });
    // },
    handleChangePassword(username) {
      this.$refs.passwordmodal.show(username);
    },
    // handleAgentSettings(username) {
    //   this.$refs.sysUserAgentModal.agentSettings(username);
    //   this.$refs.sysUserAgentModal.title = "用户代理人设置";
    // },
    passwordModalOk() {
      //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
    },
    // onSyncFinally({ isToLocal }) {
    //   // 同步到本地时刷新下数据
    //   if (isToLocal) {
    //     this.loadData()
    //   }
    // },
    //操作启用冻结
    onStatusChange(record){
      const that = this
      if (record.username.indexOf('admin') > -1) {
        that.$message.warning('管理员账号不允许此操作,请重新选择！');
        return;
      }
      if(record.status === 1){
        that.$confirm({
          title:'账号冻结',
          content: (
            <div>
              <div style="color: red">冻结后将无法登陆本系统</div>
              <div>你还要继续吗？</div>
            </div>
          ),
          okText: '继 续',
          onOk() {
            that.handlePost(record);
          },
          onCancel() {  },
        });
      }else{
        that.handlePost(record);
      }
    },
    handlePost(record){
      let status = record.status === 1 ? 2 : 1;
      frozenBatch({ ids: record.id, status }).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          this.loadData();
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    //初始化角色字典
    initRoleList() {
      queryall().then((res) => {
        if (res.success) {
          this.rolesOptions = res.result.map(item => {
            return {
              text : item.roleName,
              value: item.id
            }
          })
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    // initSysMerchantOrgList(){
    //   let params = {
    //     column: 'createTime',
    //     order: 'desc',
    //     pageNo: 1,
    //     pageSize: 99999
    //   }
    //   getAction(this.url.merchantOrgList, params).then((res) => {
    //     if(res.success){
    //       let dictOptions = res.result && res.result.records.filter(item => item.name.indexOf('兰谷') === -1);
    //       dictOptions = dictOptions.map(item => {
    //         return {
    //           value: item.id,
    //           text: item.name
    //         }
    //       })
    //       this.$refs.jSingleSelectTagRef.setCurrentDictOptions(dictOptions);
    //     }else{
    //       this.$message.warning(res.message);
    //     }
    //   })
    // }
  }

}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>